<template>
    <div>
       <label>{{lable}}</label>
       <div>
          <slot></slot>
          <p v-if='errStatus' class="errmessage">{{errMessage}}</p>
       </div>
    </div>
</template>

<script>
import Schema from 'async-validator'
export default {
    props:['lable','prop'],
    inject:['form'],
    mounted() {
       this.$on('validata',this.validata)
    },
    data() {
       return {
           errStatus:false,
           errMessage:""
       }
    },
    methods:{
        validata() {
            const rules = this.form.rules[this.prop]
            const value = this.form.model[this.prop]
            const descriptor = {[this.prop]:rules}
            let schema = new Schema(descriptor)   //表单的验证
            schema.validate({
                [this.prop]:value
            },errors => {
                if(errors){
                        this.errMessage = errors[0].message;
                        this.errStatus = true;
                    } else {
                        this.errMessage = '';
                        this.errStatus = '';
                    }
            })
        }
    }
}
</script>

<style scoped>
.errmessage {
    background:red;
}
</style>